<!--创建新的评审活动-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div class="search-button color-yellow" @click="addPS()">
        <span>新建评审活动</span>
      </div>
    </div>
    <div class="table-container table-css">
        <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}">
            <el-table-column prop="activityName" label="评审活动名称" align="center"></el-table-column>
            <el-table-column prop="subActivityName" label="评审内容" align="center"> </el-table-column>
            <el-table-column prop="endDate" label="评审截止时间" align="center"> </el-table-column>
            <el-table-column prop="zbtxName" label="选用评审标准" align="center"> </el-table-column>
            <el-table-column prop="expertList" label="指定评审专家" align="center"> 
              <template slot-scope="scope">
                <span v-for="i in scope.row.expertList" :key="i.id">{{i.name}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" align="center" min-width="350"> </el-table-column>
            <el-table-column label="设置" align="center" min-width="100">
                <div slot-scope="scope">
                    <span class="small-btn color-green" @click="editPS(scope.row)">
                        <img src="../../../../assets/assessment/icon-plan-record-detail.png"> 编辑
                    </span>
                </div>
            </el-table-column>
        </el-table>
        <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(pageNo-1)*50 == 0?1:(pageNo-1)*50}}-{{total>50?pageNo*50:total}}条</h1>
        <div class="pagination-block">
            <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
            :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
        </div>
    </div>
    <!-- 评审指标体系 -->
    <el-dialog title="评审指标体系" :visible.sync="dialogPS" :close-on-click-modal="false" width="50%">
      <div class="my-form-container" style="height:62px;width:80%">
        <el-form ref="v" :model="addForm" class="demo-ruleForm">
          <el-row class="my-form-item" style="border:none">
            <el-col :span="24">
              <div class="my-form-item-label" >评审指标体系</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value" >
                  <el-input v-model="addForm.value" class="width326"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="savePS">保存</div>
          <div class="" @click="dialogPS=false">取消</div>
        </div>
    </el-dialog>
    <!-- 新建评审指标项名称 -->
    <el-dialog title="新建评审指标项名称" :visible.sync="dialogAdd" :close-on-click-modal="false" width="50%">
      <div class="my-form-container" style="height:162px;width:80%">
        <el-form ref="v" :model="addForm" class="demo-ruleForm">
          <el-row class="my-form-item">
            <el-col :span="24">
              <div class="my-form-item-label" >新建评审指标项名称</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
                  <el-input v-model="addForm.value" class="width326" placeholder="选题意义"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="my-form-item lastOne">
            <el-col :span="24">
              <div class="my-form-item-label">评审指标项名称简介</div>
              <el-form-item  prop="studentName">
                <div class="my-form-item-value">
                  <el-input class="width326 top10" type="textarea" v-model="addForm.value" :rows="3"></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="button-group" slot="footer" style="margin-top:0">
          <div class="" @click="saveAdd">保存</div>
          <div class="" @click="dialogAdd=false">取消</div>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import {psActivityList,copyConfig} from "@/api/teachingTopic";
export default {
  data() {
    return {
        dialogPS:false,
        dialogAdd:false,
        total:1,
        pageNo:1,
        pageSize:50,
        addForm:{vale:''},
        tableData: [],
    };
  },
  mounted(){
    this.initList();
  },
  methods: {
    //初始化表格
    async initList(){
      let res = await psActivityList({current:this.pageNo,size:this.pageSize}) ;
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.data.total
      }
    },
    //新建评审活动
    addPS(){
      this.$router.push({
        path:'/teachingTopics/review/newActivity/add'
      })
    },
    //编辑单个评审活动
    editPS(row){
      this.$router.push({
        path:'/teachingTopics/review/newActivity/add',
        query:{
          datas:row
        }
      })
    },
    savePS(){
        this.dialogPS = false;
    },
    addZB(){
        this.dialogAdd = true
    },
    deleteInfo(){

    },
    gradePS(){
        this.$refs.grade.gradeDialog = true;
    },
    async saveAdd(){
      let res = await copyConfig(this.addForm);
      if(res.code == 200){
        this.dialogPS = false;
        this.initList()
      }
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
 /deep/ .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  /deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
 /deep/ .el-table__footer-wrapper td {
    padding: 0;
    height: 86px;
  }
  /deep/.el-table thead.is-group th.el-table__cell{
    border-color: #c7d7eb;
  }
 /deep/ .el-table--border th, .el-table__fixed-right-patch{
    border-color: #c7d7eb;
  }
}
</style>
<style lang="less" scoped>
@import "../../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
}
.width120{width: 120px;}
.btn2{
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 6px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    color: #f3b815;
}
/deep/.my-form-container .my-form-item > div .my-form-item-label{padding-left: 0!important;justify-content: center;}
.top10{margin-top: 13px;}
.total-notice{margin-bottom: 10px;}
.lastOne{
    border:none;height:100px;
    /deep/.el-form-item__error {
        top:96%;
    }
}
.color-green{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
  >img{width: 17px!important;height:17px!important}
}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    width: 120px;
}
.table-edit{
  span:nth-child(1){
    display: block;
    margin-bottom: 10px;
  }
  span:nth-child(2){
    display: inline-flex;
    width: 100px;
    margin-right: 20px;
  }
  span:nth-child(3){
    display: inline-flex;
    width: 140px;
  }
}
/deep/.my-form-item-label{width: 200px!important;}
.width326{width: 250px;}
 /deep/.button-group{
    padding-bottom: 20px;
    margin-top: 0px;
  }
  /deep/.el-dialog__body{
    padding: 30px 20px 0;
  }
</style>
